<template>
  <div class="look">
    <!-- 查看组件 -->
    <div>
      <el-drawer title="设备注册" :visible.sync="DialogVisible" show-close="true" size="75%" :before-close="handleClose">
        <hr />
        <div>
          <div style="display:flex;position:relative;height:35px;align-items:center;padding-left:20px;position:relative">
            <span>设备注册</span>
            <span style="position:absolute;right:0px;">
              <el-button type="primary" @click="addDevice" size="mini">注册设备</el-button>
            </span>
          </div>
          <div style="border-top:1px solid #E4E4E4; height:250px;overflow:auto">
            <el-table :data="deviceData" style="width: 100%" highlight-current-row @row-click="getDeviceDetail">
              <el-table-column align="center" label="序号" type="index" width="100px">
              </el-table-column>
              <el-table-column align="center" prop="deviceImei" label="imei">
              </el-table-column>
              <el-table-column align="center" prop="deviceName" label="设备名称">
              </el-table-column>
              <el-table-column align="center" prop="typeName" label="设备类型">
              </el-table-column>
              <el-table-column align="center" prop="manufacturer" label="厂商">
              </el-table-column>
              <el-table-column align="center" prop="supplier" label="联系人">
              </el-table-column>
              <el-table-column align="center" prop="supplierPhone" label="联系电话">
              </el-table-column>
              <el-table-column align="center" label="操作" width="100px">
                <template slot-scope="scope">
                  <el-button style="color:#C90010;border:none;" icon="el-icon-delete" circle @click="deleteDevice(scope.row.id)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div>
          <div style="height:35px;display:flex;align-items:center;padding-left:20px;"><span>参数配置</span></div>
          <div style="border-top:1px solid #E4E4E4; height:450px;overflow:auto">
            <el-input placeholder="请输入内容" v-model="input2">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <el-table :data="paramData" style="width: 100%">
              <el-table-column align="center" prop="name" label="参数名称">
              </el-table-column>
              <el-table-column align="center" prop="unit" label="单位">
              </el-table-column>
              <el-table-column align="center" prop="typeName" label="参数类型">
              </el-table-column>
              <el-table-column align="center" prop="paramMark" label="水质标记">
                <template slot-scope="scope">
                  <el-checkbox @change="addSign(scope.row,0)" :checked="scope.row.paramMark == 0"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="paramMark" label="水压标记">
                <template slot-scope="scope">
                  <el-checkbox @change="addSign(scope.row,1)" :checked="scope.row.paramMark == 1">
                  </el-checkbox>
                </template>
              </el-table-column>
              <el-table-column align="center" label="工艺总览">
                <template slot-scope="scope">
                  <el-checkbox @change="addIsWork(scope.row)" :checked="scope.row.isWorkmanship == 1"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <el-button style="color:#C90010;border:none;" @click="configAlarm(scope.row.id)">配置报警</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 配置报警 -->
        <el-dialog title="配置报警" :visible.sync="alarmVisible" style="width:1300px;margin-left:15%;" :before-close="alarmClose">
          <el-form :model="alarmForm" ref="alarmForm" class="demo-ruleForm" label-width="auto">
            <el-form-item label="报警开始">
              <el-date-picker v-model="alarmForm.alertStartDate" type="datetime" placeholder="2022-01-01 ~ 00:00:00" size="small" style="width:250px;" @change="alertStarChange">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="报警结束">
              <el-date-picker v-model="alarmForm.alertEndDate" type="datetime" placeholder="2022-12-31 ~ 00:23:59" size="small" style="width:250px;" @change="alertEndChange">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="报警类型">
              <el-select v-model="alarmForm.alertPoliciesId" placeholder="请选择报警类型" style="width:250px;" size="small" @change="alarmTypeChange">
                <el-option label="限值报警" value="1"></el-option>
                <el-option label="开关量报警" value="2"></el-option>
              </el-select>
            </el-form-item>
            <div v-if="xianzhi">
              <div style="position:relative;">
                <el-form-item label="低低限">
                  <el-input v-model="alarmForm.alertLowest" style="width:150px;" size="small">
                  </el-input>
                </el-form-item>
                <div style="width:25px;height:25px;background:red;position:absolute;top:8px;left:250px;">
                </div>
              </div>
              <div style="position:relative;">
                <el-form-item label="低限">
                  <el-input v-model="alarmForm.alertLow" style="width:150px;" size="small">
                  </el-input>
                </el-form-item>
                <div style="width:25px;height:25px;background:#FFCC00;position:absolute;top:8px;left:250px;">
                </div>
              </div>
              <div style="position:relative;">
                <el-form-item label="高限">
                  <el-input v-model="alarmForm.alertHigh" style="width:150px;" size="small">
                  </el-input>
                </el-form-item>
                <div style="width:25px;height:25px;background:#FFCC00;position:absolute;top:8px;left:250px;">
                </div>
              </div>
              <div style="position:relative;">
                <el-form-item label="高高限">
                  <el-input v-model="alarmForm.alertHighest" style="width:150px;" size="small">
                  </el-input>
                </el-form-item>
                <div style="width:25px;height:25px;background:red;position:absolute;top:8px;left:250px;">
                </div>
              </div>
              <div style="position:relative;">
                <el-form-item label="变化率">
                  <el-input v-model="alarmForm.alertChange" style="width:150px;" size="small" placeholder="1~100%">
                  </el-input>
                </el-form-item>
                <div style="width:25px;height:25px;background:red;position:absolute;top:8px;left:250px;">
                </div>
              </div>
            </div>
            <div v-if="kaiguan" style="margin-left:20px;">
              <el-fotm-item>
                <el-radio v-model="alarmForm.alertType" label=1>真(1)</el-radio>
                <el-radio v-model="alarmForm.alertType" label=0>假(0)</el-radio>
              </el-fotm-item>
            </div>
            <el-form-item label="是否启用">
              <el-switch v-model="alarmForm.isOpen"></el-switch>
            </el-form-item>
            <el-form-item style="margin-left:350px;">
              <el-button type="primary" @click="submitAlarm" size="mini">保存</el-button>
              <el-button @click="resetAlarmForm" size="mini">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <span style="position:absolute;bottom:30px;right:20px;">
          <!-- <el-button type="primary" @click="toAdd" size="mini">确 定</el-button> -->
          <el-button @click="cancle" size="mini">取 消</el-button>
        </span>
      </el-drawer>
      <!-- 新增设备表单  -->
      <el-dialog title="新增设备" :visible.sync="deviceVisible" :before-close="deviceClose">
        <el-form :model="deviceAddForm" :rules="deviceRules" ref="deviceAddForm" class="demo-ruleForm" label-position="top" label-width="auto">
          <div style="display:flex;">
            <div class="itembox">
              <el-form-item label="imei或设备编号" prop="imei" class="label-term">
                <el-input v-model="deviceAddForm.imei" class="term" size="small" style="width:250px;"></el-input>
              </el-form-item>
              <el-form-item label="设备类型" prop="type" class="label-term" style="width:250px;">
                <!-- <el-input v-model="deviceAddForm.type" class="term" size="small" style="width:250px;"></el-input> -->
                <el-select class="term" size="small" style="width:250px;" v-model="deviceAddForm.type" placeholder="请选择设备类型">
                  <el-option label="RTU" value="1"></el-option>
                  <el-option label="采集器" value="2"></el-option>
                  <el-option label="工业网关" value="3"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="itembox">
              <el-form-item label="设备名称" prop="deviceName" class="label-term">
                <el-input v-model="deviceAddForm.deviceName" class="term" size="small" style="width:250px;"></el-input>
              </el-form-item>
              <el-form-item label="厂商名称" prop="manufacturer" class="label-term infer" style="position:relative;top:0px;">
                <el-input v-model="deviceAddForm.manufacturer" class="term" size="small" style="width:250px;"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="manufacturerPhone" class="label-term infer">
                <el-input v-model="deviceAddForm.manufacturerPhone" class="term" size="small" style="width:250px;"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitDevice" size="mini">确 定</el-button>
          <el-button @click="deviceCancle" size="mini">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  searchFlScheduleDevice, //查询工艺间设备列表
  addFlScheduleWorkmanship, //添加工艺
  editFlScheduleDevice, //编辑设备
  addFlDevice, //新增设备管理
  getFlDeviceInfo, //根据设备imei查询设备
  deleteFlScheduleDevice,//删除设备
  searchFlParam, //查询参数列表
  addFlParam, //新增参数
  editFlParam, //编辑参数
  getFlScheduleAlert, //获取报警信息
  addFlScheduleAlert, //添加参数报警
  editFlScheduleAlert, //修改参数报警
} from "@/api/schedule/base/flwaterMonitorPoint/index";
export default {
  name: 'examine',
  data () {
    return {
      input2: "",
      DialogVisible: false,
      direction: 'rtl',
      //设备列表数据
      idobj: {},
      deviceData: [],
      deviceid: "",
      //设备编辑表单
      deviceEditForm: {},
      //新增设备表单
      deviceVisible: false,
      deviceAddForm: {},
      //设备表单验证
      deviceRules: {
        imei: [
          { required: true, message: '请输入imei编号', trigger: 'blur' },
        ],
      },
      paramData: [],
      //编辑参数
      parmasEditForm: {},
      //新增参数
      parmasVisible: false,
      parmasAddForm: {},
      //参数表单验证
      parmasRules: {

      },
      //配置报警表单
      alarmVisible: false,
      alarmForm: {
        alertStartDate: "2022-01-01 00:00:00",
        alertEndDate: "2022-12-31 00:23:59",
        alertPoliciesId: "1",
        alertLowest: null,
        alertLow: null,
        alertHigh: null,
        alertHighest: null,
        isOpen: false,
        deviceNo: '',
        deviceId: '',
        deviceParameterId: ""
      },
      alarmId: "",
      xianzhi: true,
      kaiguan: false,
      alarmFlag: "",
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
    }
  },
  props: [
    'DialogVisibleMod',
    'pointName',
    'pointShipName',
    'idObj'
    // 'searchOptionTable',
    // 'getFindByTypeData',
  ],
  created () {
    console.log('原因：', modData)
    // this.DialogVisible=JSON.parse(JSON.stringify(this.DialogVisibleMod))
  },
  // mounted () {
  //   document.getElementById('aa').parentNode.style.background = "red"
  // },
  watch: {
    DialogVisibleMod: {
      deep: true,
      handler (newVal, oldVal) {
        console.log(newVal)
        this.DialogVisible = JSON.parse(JSON.stringify(newVal))
      },
    },
    pointName: {
      deep: true,
      handler (value) {
        this.roomdata[0].label = value
      },
    },
    pointShipName: {
      deep: true,
      handler (value) {
        this.roomdata[0].children = value.map((item) => {
          item["label"] = item.name
          return item
        })

      },
    },
    idObj: {
      deep: true,
      handler (value) {
        this.idobj = value
        this.getDevice()
      }
    }
  },
  methods: {
    addSign (row, val) {
      let obj = {
        paramMark: val
      }
      editFlParam(row.id, obj).then(response => {
        if (response.flag) {
          this.$message.success(response.message)
        }
        else {
          this.$message.warning(response.message)
        }
        // this.getParamsData()
      }).catch()
    },
    addIsWork (row) {
      let obj
      if (row.isWorkmanship == 1) {
        obj = {
          isWorkmanship: 0
        }
      } else {
        obj = {
          isWorkmanship: 1
        }
      }
      editFlParam(row.id, obj).then(response => {
        if (response.flag) {
          this.$message.success(response.message)
        }
        else {
          this.$message.warning(response.message)
        }
      }).catch()
    },
    cancle () {
      this.DialogVisible = false
      this.$emit('cancleData')
    },
    //切换报警类型
    alarmTypeChange (v) {
      if (v == "1") {
        this.xianzhi = true,
          this.kaiguan = false
      }
      if (v == "2") {
        this.xianzhi = false,
          this.kaiguan = true
      }
    },
    //关闭报警表单
    resetAlarmForm () {
      this.$refs["alarmForm"].resetFields();
      this.alarmVisible = false
      this.getParamsData()
    },
    alarmClose () {
      this.$refs["alarmForm"].resetFields();
      this.alarmVisible = false
      this.getParamsData()
    },
    //新增工艺弹出框
    shipAdd () {
      this.shipVisible = true
    },
    //新增工艺表单
    addShip () {
      addFlScheduleWorkmanship().then(response => {
        this.$message(response.message);
        this.deviceVisible = false;
      }).catch(error => {
        alert("获取失败");
      });
    },
    getDevice () {
      let obj = this.idobj
      searchFlScheduleDevice(obj).then(response => {
        this.deviceData = response.data
        console.log(this.deviceData)
        // debugger;
      }).catch(error => {
        alert("获取失败");
      });
    },
    //点击设备表格获取设备详情
    getDeviceDetail (row) {
      this.deviceEditForm = row
      let id = row.id
      this.deviceId = id
      this.getParamsData()
      this.deviceNo = row.deviceNo
    },
    getParamsData () {
      this.paramData = []
      searchFlParam(this.deviceId).then(response => {
        console.log(response);
        this.paramData = response.data
      }).catch(error => {
        alert("获取失败");
      });
    },
    //点击参数表格获取报警信息
    getAlertDetail (row) {
      let id = row.id
      searchFlScheduleAlert(id).then(response => {
        console.log(response);
        this.paramData = response.data
      }).catch(error => {
        alert("获取失败");
      });
    },
    //点击保存 
    submitEditForm () {
      console.log(this.deviceEditForm)
      let id = this.deviceEditForm.id
      editFlScheduleDevice(id, this.deviceEditForm).then(response => {
        this.$message(response.message);;
      }).catch(error => {
        alert("获取失败");
      });
    },
    //新增设备
    addDevice () {
      this.deviceVisible = true
    },
    //输入设备编号的回调
    imeiChange (v) {
      getFlDeviceInfo(v).then(response => {
        console.log(response.data)
        this.deviceAddForm = response.data
      }).catch(error => {
      })

    },
    //关闭设备弹窗
    deviceCancle () {
      this.deviceVisible = false
      this.$refs["deviceAddForm"].resetFields();
    },
    deviceClose () {
      this.deviceVisible = false
      this.$refs["deviceAddForm"].resetFields();
    },
    //保存设备
    submitDevice () {
      let obj = {
        monitorPointId: this.idobj.monitorPointId,
        workmanshipId: this.idobj.workmanshipId,
        deviceImei: this.deviceAddForm.imei,
        deviceName: this.deviceAddForm.deviceName,
        type: parseInt(this.deviceAddForm.type),
        manufacturer: this.deviceAddForm.manufacturer,
        manufacturerPhone: this.deviceAddForm.manufacturerPhone
      }
      addFlDevice(obj).then(response => {
        this.$message(response.message);
        this.deviceVisible = false;
        this.$refs["deviceAddForm"].resetFields();
        this.getDevice()
      }).catch(error => {
        alert("获取失败");
      });
    },
    //删除设备
    deleteDevice (id) {
      let arrId = [id];
      this.$confirm("确认删除？").then(_ => {
        deleteFlScheduleDevice(arrId).then(response => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getDevice()
        });
        done();
      }).catch(_ => { });
      this.getDevice(this.deviceid)
    },
    //配置报警
    configAlarm (id) {
      getFlScheduleAlert(id).then(response => {
        console.log(response.data)
        if (response.data) {
          this.alarmFlag = "editAlarm"
          this.alarmForm = response.data
          this.alarmId = response.data.id
          this.alarmForm.alertPoliciesId = response.data.alertPoliciesId.toString()
        }
        else {
          this.alarmFlag = "addAlarm"
        }
      }).catch(error => {
      })
      this.alarmForm.deviceParameterId = id
      this.alarmVisible = true
    },
    //转换报警时间格式
    alertStarChange (v) {
      this.alarmForm.alertStartDate = this.formatter(v)
    },
    alertEndChange (v) {
      this.alarmForm.alertEndDate = this.formatter(v)
    },
    //时间转化
    formatter (data) {
      let d = new Date(data);
      let month = d.getMonth() + 1
      let date = d.getDate()
      let hour = d.getHours()
      let minute = d.getMinutes()
      let second = d.getSeconds()
      if (month < 10) {
        month = "0" + month
      }
      if (date < 10) {
        date = "0" + date
      }
      if (hour < 10) {
        hour = "0" + hour
      }
      if (minute < 10) {
        minute = "0" + minute
      }
      if (second < 10) {
        second = "0" + second
      }
      let time = d.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
      return time
    },
    //提交报警
    submitAlarm () {
      if (this.alarmForm.alertChange != null) {
        this.alarmForm.alertChange = parseInt(this.alarmForm.alertChange)
      }
      if (this.alarmForm.alertLowest != null) {
        this.alarmForm.alertLowest = parseInt(this.alarmForm.alertLowest)
      }
      if (this.alarmForm.alertLow != null) {
        this.alarmForm.alertLow = parseInt(this.alarmForm.alertLow)
      }
      if (this.alarmForm.alertHigh != null) {
        this.alarmForm.alertHigh = parseInt(this.alarmForm.alertHigh)
      }
      if (this.alarmForm.alertHighest != null) {
        this.alarmForm.alertHighest = parseInt(this.alarmForm.alertHighest)
      }
      if (this.alarmForm.alertPoliciesId != null) {
        this.alarmForm.alertPoliciesId = parseInt(this.alarmForm.alertPoliciesId)
      }
      this.alarmForm.deviceNo = this.deviceNo
      this.alarmForm.deviceId = this.deviceId
      let obj = this.alarmForm
      console.log(obj)
      debugger;
      // addFlScheduleAlert(obj).then(response => {
      //   this.$message(response.message)
      //   this.alarmVisible = false
      //   this.$refs["alarmForm"].resetFields();
      // }).catch(error => {
      // })
      // if (obj.alertLowest.length === 0 && obj.alertLow.length === 0 && obj.alertHigh.length === 0 && obj.alertHighest.length === 0) {
      //   this.$message("请输入")
      //   debugger
      // } else {
      //   debugger
      // }
      if (this.alarmFlag == "addAlarm") {
        if (obj.alertLowest == null && obj.alertLow == null && obj.alertHigh == null && obj.alertHighest == null) {
          this.$message("请输入")
        } else {
          addFlScheduleAlert(obj).then(response => {
            this.$message(response.message)
            this.alarmVisible = false
            this.$refs["alarmForm"].resetFields();
          }).catch(error => {
          })
        }
      }
      else {
        debugger
        let id = this.alarmId
        editFlScheduleAlert(id, obj).then(response => {
          this.$message(response.message)
          this.alarmVisible = false
          this.$refs["alarmForm"].resetFields();
        }).catch(error => {
        })
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.DialogVisible = false
          this.$emit('cancleData')
        })
        .catch(_ => { });
    },
    confirm () {
      this.DialogVisible = false
      console.log('1111')
      this.$emit('examineDialog', this.DialogVisible)
    },
  },
  computed: {
    // 字典计算属性
    optionDatass () {
      return function (arr, val, EN, data) {
        // console.log(arr,val,EN,'99999');

        // console.log(arr[val],'why');
        // 判断特殊
        if (EN == 'sysCompanyCode') {
          const getFindByTypeData = this.getFindByTypeData
          console.log(getFindByTypeData, 9999999999)

          for (let i = 0; i < getFindByTypeData.length; i++) {
            const element = getFindByTypeData[i]
            if (getFindByTypeData[i].sysCompanyCode == val) {
              return getFindByTypeData[i].name
            }
          }
        }
        if (arr) {
          if (
            EN == 'meterreader' &&
            data.isMeterreaderMultiple &&
            val.includes(',')
          ) {
            val = val.split(',')
            let names = ''
            console.log('val：：', val)
            for (let j = 0; j < val.length; j++) {
              for (let i = 0; i < arr.length; i++) {
                if (val[j] == arr[i].value) {
                  names += arr[i].label + ','
                }
              }
            }
            return names.substring(0, names.length - 1)
          } else {
            for (let i = 0; i < arr.length; i++) {
              if (arr[i].value == val) {
                return arr[i].label
              }
            }
          }
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.itembox {
  width: 50%;
  // position: relative;
  // bottom: 20px;
  /deep/ .el-form-item__label {
    width: 100% !important;
  }
}
.label_term {
  position: relative;
  bottom: 50px;
  margin-left: 15px;
}
.infer {
  // position: relative;
  // bottom: 25px;
}
.label-term {
  margin-left: 15px;
}
.term {
  width: 145px;
  position: relative;
  right: 80px;
  bottom: 10px;
}
.tip {
  height: 40px;
  width: 95px;
  text-align: center;
  padding-top: 10px;
  position: relative;
  bottom: 102px;
  left: 67px;
}
.limit {
  width: 50px;
  position: relative;
  right: 78px;
  bottom: 15px;
}
.look {
  .lookAll {
    // max-height: 500px;
    // overflow: hidden;
    .list {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      .fon {
        width: 16.55%;
        text-align: right;
        margin-right: 20px;
      }
      .inb {
        width: 83.45%;
      }
    }
  }
}
</style>
